
// eslint-disable-next-line react/prefer-stateless-function
// eslint-disable-next-line no-useless-constructor
import React from 'react'
import { withRouter } from "react-router-dom"
import '../index.scss'
// eslint-disable-next-line react/prefer-stateless-function
interface IProps {
  history?: any;
}
interface IState{
  list: any[];
 }

class Drawer extends React.Component<IProps,IState> {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          name: 'Article',
          id: 1,
          path: '/article'
        },
        {
          name: 'Rainy',
          id: 2,
          path: '/Article'
        },
        {
          name: 'Login',
          id: 3,
          path: '/login'
        },
        {
          name: 'Publish',
          id: 4,
          path: '/publish'
        },
        {
          name: 'About',
          id: 5,
          path: '/about'
        }
      ]
    }
  }
  componentDidMount() {
    console.log(this.props)
  }
  listOnclick = (item) => {
    this.props.history.push(item.path)
  }
  render() {
    return (
      <div className='drawerContent'>
        <div className='list-box'>
          <div className='list'>
            {this.state.list.map(item => {
              return <div key={item.id} className='list-item' onClick={this.listOnclick.bind(this, item)}>{item.name}</div>
            })}
          </div>
        </div>

      </div>
    )
  }
}
export default withRouter(Drawer)
